{extend name="common/block" /}
{block name="content"}

<div class="layui-tab layui-tab-card" lay-filter="ltab">
    <ul class="layui-tab-title ">
        {volist name="group" id="vo"}
        <li {if $key == 0}class="layui-this"{/if} lay-tag='{$vo.tag}' lay-id={$key}>{$vo.name}</li>
        {/volist}
    </ul>
    <div class="layui-tab-content">
        <div class="layui-btn-container " style="display: inline-block;">
            {volist name="menu_buttons" id="item"}
            {switch $item.action}
                    {case create}
                        <button class="layui-btn layui-btn-sm j-open"
                                j-href="{:url($item.link)}"
                                j-title="{$item.name}"
                                j-type="2"
                                j-config='{"area":["80%","80%"],"anim":2}'
                        >
                            <i class="layui-icon">{if !empty($item.icon)}{php}echo $item['icon'];{/php}{else/}&#xe624;{/if}</i>{$item.name}
                        </button>
                    {/case}
                    {case delete}
                        <button id="btnDeleteChecked" class="layui-btn layui-btn-sm layui-btn-danger" j-href="{:url($item.link)}">
                            <i class="layui-icon">{if !empty($item.icon)}{php}echo $item['icon'];{/php}{else/}&#xe640;{/if}</i>{$item.name}
                        </button>
                    {/case}
                    {default /}
                {/switch}
            {/volist}
        </div>

        {if isset($menu_buttons.search)}
            <div class="j-right">
                <input class="layui-input" id="edtSearch" value="" placeholder="输入关键字,菜单名等"
                       style="display: inline-block;width: 140px;height: 30px;line-height: 30px;padding: 0 5px;margin-right: 5px;"/>
                <div class="layui-btn-container" style="display: inline-block;">
                    <button id="btnSearch" class="layui-btn layui-btn-sm layui-btn-primary">
                        <i class="layui-icon">&#xe615;</i>搜索
                    </button>
                    <button id="btnClearSearch" class="layui-btn layui-btn-sm layui-btn-primary">
                        <i class="layui-icon">&#x1006;</i>清除搜索
                    </button>
                </div>
            </div>
        {/if}

        <script type="text/html" id="opera">
            {volist name="menu_buttons" id="opera"}
                {switch $key}
                    {case update}
                        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">{$opera.name}</a>
                    {/case}
                    {case delete}
                        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">{$opera.name}</a>
                    {/case}
                {/switch}
            {/volist}
        </script>
        <table id="table" lay-filter="config"></table>
    </div>
</div>
{/block}

{block name="script"}
<script>
    layui.use(['table', 'layer', 'jquery','element','form'], function () {
        var table = layui.table
            , layer = layui.layer
            , $ = layui.jquery
            , element = layui.element
            , form = layui.form
            , currentUrl = '{:url("index")}'
            , flag = 'base';

        form.render();

        element.on('tab(ltab)',function(d){
            flag = $(this).attr('lay-tag');
            loadTable('{:url("index")}?group='+$(this).attr('lay-tag'));
        })
        function loadTable(url){
            table.render({
                elem: '#table',
                url: url,
                page: true,
                height: 'full-250',
                toolbar: true,
                method:'post',
                cols: [[ //表头
                    {type:'checkbox'}
                    , {field:'id',title:'ID'}
                    , {field:'key',title:'配置名'}
                    , {field:'title',title:'名称'}
                    , {field:'type_text',title:'类型'}
                    , {title:'操作',templet:'#opera'}
                ]],
            })
        }
        loadTable(currentUrl+'?group='+flag);

         table.on('tool(config)', function(obj){
            var data = obj.data;
            if(obj.event === 'del'){
                layer.confirm('确定执行删除操作', function(index){
                    layer.close(index);
                    $.get('delete', {id:data.id},function(r){
                        if(r.code == 1){
                            showpopup(r.msg);
                            obj.del();
                        }else{
                            showpopup(r.msg);
                        }
                    },'json')
                });
            } else if(obj.event === 'edit'){
                layer.open({
                    type:2,
                    content:'update?id='+data.id,
                    shadeClose:true,
                    area:['80%','80%'],
                    title:'修改配置信息'
                })
            }
        });

        //数据表格清除搜索
        layui.$(document).on('click','#btnClearSearchConfig',function(){
            var tableIns = layui.table.reload('table',{
                url: 'index?group='+flag //设置异步接口
                ,method:'post'
            });
            $('#edtSearch').val('');
            $('#editSelect').val('')
        })

        //数据表格搜索
        layui.$(document).on('click','#btnSearchConfig',function(){
            var keywords = $('#edtSearch').val(),
                field = $('#editSelect').val(),
                url = window.location.href;
            where = {
                keyword:keywords
            }
            if(field !== undefined){
                where.field = field
            }
            var tableIns = layui.table.reload('table',{
                url: url //设置异步接口
                ,where:where
                ,method:'post'
            });
        })
})
</script>
{/block}
